import "./start-frame.less"
import { PlusOutlined } from '@ant-design/icons'
import { ItemList } from "./itemList";
import { requireListData } from "../vo/request"
import groupContainer from "./context"
import { useState } from "react";
import { useEffect } from "react";
import { useContext } from "react";


export const RightCon = ( props: any) => {

    const group = useContext(groupContainer);

    const [list, setList] = useState([{
        projectId:0,   
        projectName: "",
        projectPath: "",
        projectCreateTime: "",
        projectLastUpdateTime: "",
        description: "",
        countApi: 0,
        countMember:0,
    }]);
    
    useEffect(()=>{
        (async ()=>{
            let result = await requireListData(group.group.groupId);
            setList(result.data)
        })()
    },[group.group])
    return (
        <div className="RightMainCon" key={group.group.groupId}>
            <ul>
                {
                    (()=>{
                        if(list){
                            return list.map((item, index: any) => {
                                return <div key={Math.random()+index} onClick={()=>{sessionStorage.setItem("project", ""+item.projectId)}}><ItemList content={item.projectName} interfaceNum={item.countApi} memberNum={item.countMember} ></ItemList></div>
                            })
                        }
                    })()
                }
                <li className="plus" onClick={
                    () => {
                        props.SetVisable(true);
                    }
                } >
                    <PlusOutlined />
                </li>
            </ul>
        </div>
    )
}